import { Outlet, useNavigate} from 'react-router-dom'
import {Layout, Menu, Button, Space} from 'antd';
import React, {useState, useEffect} from 'react';
import {PoweroffOutlined} from "@ant-design/icons";
import './index.css'
import icons from "../../icons";
import {getMenus} from "../../api/list";

const {Header, Content, Footer, Sider} = Layout;
const Main = () => {
    const [menus, setMenus] = useState([])
    const navigate = useNavigate()
    useEffect(() => {
        const fetchData = ()=> {
            getMenus().then(response=>{
                const menus = []
                const {data:res} = response.data
                res.forEach((menu, index) => {
                    let children = []
                    if (res[index].children) {
                        res[index].children.forEach(child => {
                            children = [...children, {
                                key: child.id,
                                label: child.detail,
                                icon: null,
                                children: null,
                                url: child.url
                            }]
                        })
                    }
                    menus[index] = {key: menu.detail, label: menu.detail, icon: icons[menu.icon], url: menu.url, children}
                })
                setMenus(menus)
            })
        }
        fetchData()
    }, [])
    const onClick = (e) => {
        const {url} = e.item.props
        navigate(url)
    };
    const logOut = () => {
        sessionStorage.clear()
        navigate("/login")
    }
    return (
        <Layout
            style={{
                minHeight: '100vh',
            }}
        >
            <Sider style={{
                overflow: 'auto',
                height: '100vh',
                position: 'fixed',
                left: 0,
                top: 0,
                bottom: 0,
            }}>
                <div className="logo">自動化測試平台
                </div>
                <Menu theme="dark" mode="inline" items={menus} onClick={onClick}/>
            </Sider>
            <Layout className="site-layout" style={{
                marginLeft: 200,
            }}>
                <Header
                    className="site-layout-background"
                    style={{
                        padding: 0,
                    }}
                >
                    <div>
                        <div style={{float: 'right'}}><Space>{sessionStorage.getItem("username")}<Button
                            onClick={logOut} type="primary" danger shape="circle">
                            <PoweroffOutlined />
                        </Button></Space></div>
                    </div>
                </Header>
                <Content
                    style={{
                        margin: '0 16px',
                    }}
                >
                    <Outlet/>
                </Content>
                <Footer
                    style={{
                        textAlign: 'center',
                    }}
                >
                    Ant Design ©2018 Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default Main;